import{d as t,M as l,A as d,h as o}from"./Anchors-CRD96j4l.js";import{D as s,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const r={path:"/nav/accordion",name:"accordion",title:"Accordion 手风琴面板"};function c(n){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return l(o,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),r.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(s,{}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Accordion, BothSide, HView, Icon, Tag, View, VView } from "cui-solid"

export default () => {
    const centerStyle = {
        'justify-content': 'center'
    }

    return <HView class="components-layout-demo" size="450px">
        <View size="250px" style={{'text-align': 'initial', 'box-shadow': '2px 0 8px 0 rgba(29, 35, 41, 0.05)'}} class="layout-demo-sider">
            <Accordion onSelect={(name: string, open: boolean, v: any) => {
                console.log(name, open, v);
            }}>
                <Accordion.Item name="a1" title="Title1" icon={<Icon name="dashboard"/>}>content1</Accordion.Item>
                <Accordion.Item name="a2" title={<BothSide>
                    <span>Title2</span>
                    <Tag size="small" theme="success">1234</Tag>
                </BothSide>} icon={<Icon name="cog"/>}>
                    <p>content2</p>
                    <p>content2</p>
                    <p>content2</p>
                    <p>content2</p>
                </Accordion.Item>
            </Accordion>
        </View>
        <VView style={centerStyle}>
            <View class="layout-demo-header" size="64px" style={centerStyle} />
            <View style={centerStyle} />
            <View class="layout-demo-header" size="64px" style={centerStyle} />
        </VView>
    </HView>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"multi",title:"多选",src:"2multi.demo.tsx",code:`import { Accordion, Button, HView, Icon, View, VView } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [activeKey, setActiveKey] = createSignal(['a2']);

    const centerStyle = {
        'justify-content': 'center'
    }

    return <VView size="300px">
        <HView class="components-layout-demo" size="450px">
            <View size="250px" style={{'text-align': 'initial', overflow: 'auto'}} class="layout-demo-sider">
                <Accordion activeKey={[activeKey, setActiveKey]} multi onSelect={(name: string, open: boolean, v: any) => {
                    console.log(name, open, v);
                }}>
                    <Accordion.Item name="a1" title="Title1" icon={<Icon name="dashboard"/>}>content1</Accordion.Item>
                    <Accordion.Item name="a2" title="Title2" icon={<Icon name="cog"/>}>
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                    </Accordion.Item>
                    <Accordion.Item name="a3" title="Title3" icon={<Icon name="flag"/>}>
                        <p>content3</p>
                        <p>content3</p>
                        <p>content3</p>
                        <p>content3</p>
                    </Accordion.Item>
                </Accordion>
            </View>
            <VView style={centerStyle}>
                <View class="layout-demo-header" size="64px" style={centerStyle} />
                <View style={centerStyle}>
                    <Button onClick={() => {
                        setActiveKey(['a1']);
                    }}>更新</Button>
                </View>
                <View class="layout-demo-header" size="64px" style={centerStyle} />
            </VView>
        </HView>
    </VView>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"multi"})," 属性可以展开多个面板",t(e.br,{}),`
`,t(e.code,{className:"sp-inline-code",children:"activeKey"})," 属性为可控展开面板属性"]})}),t(i,{id:"flex",title:"占满容器",src:"3flex.demo.tsx",code:`import { Accordion, HView, Icon, View, VView } from "cui-solid"

export default () => {
    const centerStyle = {
        'justify-content': 'center'
    }

    return <VView size="300px">
        <HView class="components-layout-demo" size="450px">
            <View size="250px" style={{'text-align': 'initial'}} class="layout-demo-sider">
                <Accordion activeKey="a1" flex onSelect={(name: string, open: boolean, v: any) => {
                    console.log(name, open, v);
                }}>
                    <Accordion.Item name="a1" title="Title1" icon={<Icon name="dashboard"/>}>content1</Accordion.Item>
                    <Accordion.Item name="a2" title="Title2" icon={<Icon name="cog"/>}>
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                    </Accordion.Item>
                    <Accordion.Item name="a3" title="Title3" icon={<Icon name="flag"/>}>
                        <p>content3</p>
                        <p>content3</p>
                        <p>content3</p>
                        <p>content3</p>
                    </Accordion.Item>
                </Accordion>
            </View>
            <VView style={centerStyle}>
                <View class="layout-demo-header" size="64px" style={centerStyle} />
                <View style={centerStyle} />
                <View class="layout-demo-header" size="64px" style={centerStyle} />
            </VView>
        </HView>
    </VView>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"flex"})," 属性可以将手风琴占满容器"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"multi"}),t(e.td,{style:{textAlign:"left"},children:"可以选择多个面板展开"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"activeKey"}),t(e.td,{style:{textAlign:"left"},children:"选中面板，绑定属性"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"flex"}),t(e.td,{style:{textAlign:"left"},children:"flex布局并且占满容器"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelect"}),t(e.td,{style:{textAlign:"left"},children:"面板选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"Item属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"面板名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"面板标题"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"面板标题图标"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"OnSelect"})}),t(e.td,{style:{textAlign:"left"},children:"面板选中事件"}),t(e.td,{style:{textAlign:"left"},children:"name"})]})})]})]}),`
`,`
`,`
`,t(d,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"multi",title:"多选",src:"2multi.demo.tsx"},{id:"flex",title:"占满容器",src:"3flex.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"Item属性"},{id:"events",depth:2,title:"事件"}]})]})}function p(n={}){const{wrapper:e}=n.components||{};return e?t(e,{...n,children:t(c,{...n})}):c(n)}export{p as default,r as frontmatter};
